<template>
	<div class="page">
		<el-row :span="24">
			<el-col :span="16">
				<basic-container>
					<!-- 资金账户 -->
					<div class="accountBox">
						<div class="hypermarket " style="cursor:pointer;" @click="goOrderPage()">
							<div class="hypermarkTop"></div>
							<div class="hyperTitle">订单总数</div>
							<div class="accountSum">
								<div style="width: 100%;text-align: center;"  v-if="indexData.sumOrderNum || '0'">
									{{ indexData.sumOrderNum}}
								</div>
								<div>
									<span>昨日新增订单数</span>
									<span v-if="indexData.yesterdaySumOrderNum">：({{ indexData.yesterdaySumOrderNum}})</span>
								</div>
							</div>
						</div>
						<div class="hypermarket usableBg" >
							<div class="hypermarkTop"></div>
							<div class="hyperTitle">预计待结算</div>
							<div class="accountSum">
								<div style="width: 100%;text-align: center;"><span>￥</span>{{indexData.allMount}}</div>
								<div>
									<span>在途金额</span>
									<span >：(￥{{indexData.lockAmount}})</span>
								</div>
							</div>
						</div>
						<div class="hypermarket usableBg" >
							<div class="hypermarkTop"></div>
							<div class="hyperTitle">实际可结算金额</div>
							<div class="accountSum">
								<div style="width: 100%;text-align: center;"><span>￥</span>{{indexData.totalAmount}}</div>
								<div>
									<span>当前账户</span>
								</div>
							</div>
						</div>
						<div class="hypermarket" >
							<div class="hypermarkTop"></div>
							<div class="hyperTitle">订单总金额</div>
							<div class="accountSum">
								<div style="width: 100%;text-align: center;" v-if="indexData.sumOrderMoney">
									<span>￥</span>
									{{ indexData.sumOrderMoney || '0' }}
								</div>
								<div>
									<span>昨日新增订单金额</span>
									<span v-if="indexData.yesterdaySumOrderMoney">：({{ indexData.yesterdaySumOrderMoney || '0' }})</span>
								</div>
							</div>
						</div>
					</div>
					<!--					<avue-data-tabs :option="option"></avue-data-tabs>-->
					<div class="listName">交易订单</div>
					<avue-data-display :option="option1"></avue-data-display>
					<div class="listName">店铺商品</div>
					<avue-data-display :option="option2"></avue-data-display>
					<div class="listName">店铺运营推广</div>
					<avue-data-cardtext :option="option3"></avue-data-cardtext>
				</basic-container>
			</el-col>
			<el-col :span="8" style="margin-top: 10px;">
				<basic-container>
					<div class="top_user" >
						<div class="top_user_top">
							<div class="top_img_box"><img :src="storeInfo.storeLogoUrl" /></div>
							<div class="top_name_box">
								<div style="font-size: 20px;">{{ storeInfo.storeName }}</div>
								<div style="font-size: 13px;">{{ storeInfo.area }}</div>
							</div>
							<div class="jifen">
								<div style="line-height: 17px">当月积分:{{ storeInfo.currentIntegral }}</div>
								<div style="line-height: 17px">累计积分:{{ storeInfo.totalIntegral }}</div>
							</div>
						</div>
						<div class="top_user_body" v-if="evaluateInfo">
							<div v-for="(item, index) in evaluateInfo" :key="index">
								<div class="body_item">
									<div>{{ item.value || '0' }}</div>
									<div>{{ item.label || '' }}</div>
								</div>
							</div>
						</div>
					</div>

					<!--					<avue-data-operatext :option="optionTest"></avue-data-operatext>-->
					<div class="hypermarket">
						<!--						<div class="hypermarkTop"></div>-->
						<div class="hyperTitle">商城公告</div>
						<div class="hyperListBox" style="overflow:auto">
								<div class="hyperList"@click="checkCmsDetail(item.id)" v-for="(item, index) in hyperList" :key="index">
									<i class="el-icon-bell"></i>
									<span class="hyperListName">{{item.title || ''}}</span>
									<span style="float: right;width: 150px;text-align: right">{{item.addTime || ''}}</span>
								</div>
						</div>
					</div>

					<el-drawer :visible.sync="dialogTableVisible" size="70%">
						<div class="outDiv">
							<div class="upDiv">
								<h3 align="center" class="spanClass">{{ obj.title }}</h3>
							</div>
							<div class="upDiv">
								<p align="center" class="spanClassTime">{{ obj.addTime }}</p>
							</div>
							<div class="downDiv">
								<li style="margin-left: 10px" v-html="obj.content">{{ obj.content }}</li>
							</div>
						</div>
					</el-drawer>
				</basic-container>
			</el-col>
		</el-row>
	</div>
</template>
<script>
import { mapGetters } from 'vuex';
import { getStore } from '@/util/store';
import { sellerhomeData, storeOrder, storeEvaluate, storeCms, storeAccount, getDetail } from '@/api/index/sellerhome';
import { getInforList } from '@/api/account/seller/userAccount';
export default {
	name: 'sellerhome',
	data() {
		return {
			StoreAccountList:[],
			dialogTableVisible: false,
			obj: {},
			optionView: {
				submitBtn: false,
				emptyBtn: false,
				dialogType: 'drawer',
				title: '文章管理',
				type: 'drawer',
				size: 'mini',
				excelBtn: true,
				addBtn: true,
				tip: false,
				border: true,
				index: false,
				selection: true,
				viewBtn: false,
				rowKey: 'id',
				height: 'auto',
				// calcHeight: 380,
				menuWidth: 300,
				labelWidth: 130,
				column: [
					{
						label: '标题',
						prop: 'title',
						fixed: true,
						disabled: true
					},
					{
						type: 'ueditor',
						component: 'ueditor',
						label: '内容',
						span: 24,
						options: {
							action: '',
							oss: '',
							props: {},
							ali: {},
							qiniu: {}
						},
						prop: 'content',
						disabled: true
					}
				]
			},
			storeInfo:{
				storeName:'',
				gradeName:'',
				creditImgUrl:'',
				storeAddress:'',
				currentIntegral:0,
				area:'',
				totalIntegral:0,
			},
			evaluateInfo:[],
			goodsInfo:{},
			indexData: {
				evaluateInfo:{},
				yesterdaySumOrderMoney:{},
			},
			// accountInfo: [],
			hyperList: [],
			// option: {
			// 	span: 8,
			// 	data: []
			// },
			option1: {
				span: 4,
				data: []
			},
			option2: {
				span: 4,
				data: []
			},
			option3: {
				span: 8,
				data: []
			},
			option4: {
				span: 24,
				data: []
			},
			option5: {
				span: 24,
				data: []
			}
		};
	},
	computed: {
		...mapGetters(['userInfo'])
	},
	async created() {
		let isNeedModifyPassword = getStore({ name: 'isNeedModifyPassword' });
		if (isNeedModifyPassword) {
			this.$router.push({ path: '/info/setting' });
		}
		await storeOrder().then(res => {
			if (res.data.code == 200) {
				if (res.data.data) {
					this.indexData = res.data.data;
					console.log('indexData:', this.indexData);
				}
			}
		});
		await getInforList().then(res => {
			if (res.data.code == 200) {
				if (res.data.data) {
					console.log(res.data.data);
					let accountAmountInfo = res.data.data;
					let _allMount = Number(accountAmountInfo.totalAmount) + Number(accountAmountInfo.lockAmount);
					//总金额小于0时归0
					if(_allMount<0){
						_allMount = 0;
					}
					if (!_allMount) {
						_allMount = 0 + "";
					}
					_allMount = Math.floor(_allMount * 100) / 100;
					accountAmountInfo.allMount = _allMount;
					accountAmountInfo.totalAmount = res.data.data.totalAmount.toString();
					accountAmountInfo.lockAmount =  res.data.data.lockAmount.toString();
					Object.assign(this.indexData,accountAmountInfo);
				}
			}
		});
		await sellerhomeData().then(res => {
			if (res.data.code == 200) {
				if (res.data.data) {
					this.storeInfo = res.data.data.storeInfo
					this.goodsInfo = res.data.data.goodsInfo
					// Object.assign(this.indexData, res.data.data);
					// console.log('indexData:', this.indexData);
				}
			}
		});

		await storeEvaluate(1191974507350003713).then(res => {
			if (res.data.code == 200) {
				if (res.data.data) {
					let data = {
						evaluateInfo: res.data.data
					};
					this.evaluateInfo = res.data.data
					Object.assign(this.indexData, data);
				}
			}
		});
		await storeCms().then(res => {
			if (res.data.code == 200) {
				if (res.data.data) {
					Object.assign(this.indexData, res.data.data);
				}
			}
		});
		setTimeout(() => {
			let tempHyperList = this.indexData.cmsInfo || [];
			if (tempHyperList.length > 0) {
				for (let i = 0; i < tempHyperList.length; i++) {
					let tempData = tempHyperList[i].addTime;
					console.log(tempData);
					let timearr = tempData
						.replace(' ', ':')
						.replace(/\:/g, '-')
						.split('-');
					let newData = '' + timearr[0] + '-' + timearr[1] + '-' + timearr[2];
					tempHyperList[i].addTime = newData;
				}
			}
			console.log(this.storeInfo)
			this.option4.data = [
				{
					title: this.storeInfo.storeName,
					subtitle: this.storeInfo.gradeName && this.storeInfo.storeAddress,
					img: this.storeInfo.creditImgUrl,
					color: '#00a7d0',
					list: this.indexData.evaluateInfo
				}
			];
			this.hyperList = this.indexData.cmsInfo;


			this.option1.data = [
				{
					count: this.indexData.obligationCount,
					title: '待付款',
					// href:'/#/base/transaction/seller/orderForm',
					// target:'_blank'
					click: () => {
						localStorage.setItem('orderState', '10');
						this.$router.push({ path: '/base/transaction/seller/orderForm' });
					}
				},

				{
					count: this.indexData.shipmentsCount,
					title: '待发货',
					/*href:'/#/base/transaction/seller/orderForm',
			target:'_blank'*/
					click: () => {
						localStorage.setItem('orderState', '27');
						this.$router.push({ path: '/base/transaction/seller/orderForm' });
					}
				},
				{
					count: this.indexData.takeDeliveryCount,
					title: '待收货',
					// href:'/#/base/transaction/seller/orderForm',
					// target:'_blank'
					click: () => {
						localStorage.setItem('orderState', '30');
						this.$router.push({ path: '/base/transaction/seller/orderForm' });
					}
				},
				{
					count: this.indexData.finishCount,
					title: '已完成',
					// href:'/#/base/transaction/seller/orderForm',
					// target:'_blank'
					click: () => {
						localStorage.setItem('orderState', '50');
						this.$router.push({ path: '/base/transaction/seller/orderForm' });
					}
				},
				{
					count: this.indexData.refundCheckCount,
					title: '退款中',
					// href:'/#/base/transaction/seller/orderForm',
					// target:'_blank'
					click: () => {
						localStorage.setItem('orderState', '-1');
						this.$router.push({ path: '/base/transaction/seller/orderForm' });
					}
				}
			];
			this.option2.data = [
				{
					title: '出售中商品',
					count: this.goodsInfo.shelfCount,
					icon: 'el-icon-pie-chart',
					// href: "/#/base/goods/seller/goods",
					click: () => {
						localStorage.setItem('activeName', 'first');
						this.$router.push({ path: '/base/goods/seller/goods' });
					}
				},
				{
					title: '已下架商品',
					count: this.goodsInfo.mavenCount,
					icon: 'el-icon-sold-out',
					// href: "/#/base/goods/seller/goods",
					click: () => {
						localStorage.setItem('activeName', 'second');
						this.$router.push({ path: '/base/goods/seller/goods' });
					}
				},
				{
					title: '违规下架商品',
					count: this.goodsInfo.violationCount,
					icon: 'el-icon-box',
					href: '/#/base/goods/seller/goods',
					click: () => {
						localStorage.setItem('activeName', 'fourth');
						this.$router.push({ path: '/base/goods/seller/goods' });
					}
				},
				{
					title: '待审核商品',
					count: this.goodsInfo.pendingCount,
					icon: 'el-icon-data-line',
					// href: "/#/base/goods/seller/goods",
					click: () => {
						localStorage.setItem('activeName', 'third');
						this.$router.push({ path: '/base/goods/seller/goods' });
					}
				},
				{
					title: '审核失败商品',
					count: this.goodsInfo.noPassCount,
					icon: 'el-icon-document-delete',
					// href: "/#/base/goods/seller/goods",
					click: () => {
						localStorage.setItem('activeName', 'five');
						this.$router.push({ path: '/base/goods/seller/goods' });
					}
				}
			];
			this.option3.data = [
				{
					title: '平台活动',
					color: '#00a7d0',
					icon: 'el-icon-mobile-phone',
					content: '千种商品，优惠多多，尽情挑选',
					href: '/#/base/activity/seller/platformAct'
				},
			];
			
			this.option5.data = [
				{
					title: '商城广告',
					src: 'images/vip3.png',
					color: '#ef4868',
					list: [
						{
							title: '授权商业化开发,永久更新授权使用',
							check: true
						},
						{
							title: '后期更新和新产品将全部免费',
							check: true
						},
						{
							title: '拥有avue系列的全部特权和全部源码（包括avuex）',
							check: true
						},
						{
							title: '提供远程技术支持和问题解答',
							check: true
						},
						{
							title: '赠送 Avue.js 脚手架文档（价值¥59.99）',
							href: 'https://www.kancloud.cn/smallwei/avue',
							check: true
						},
						{
							title: '赠送 Avue 修仙系列视频教程',
							href: 'https://www.bilibili.com/video/av24644922',
							check: true
						}
					]
				}
			];
			
		}, 0);
	},
	methods: {
		checkCmsDetail(val) {
			getDetail(val).then(res => {
				if (res.data.code == 200) {
					this.obj = res.data.data;
					this.obj.content = this.obj.content.replace(/<p><img/g,"<p style='overflow: hidden;font-size: 0;line-height: 0;margin-top: -1px;padding-top: 10px;text-align: center;'><img style='width: 100%;height: auto;'")
					this.obj.content = this.obj.content.replace(/<img/g,"<img style='width: 100%;height: auto;'")
					this.dialogTableVisible = true;
				} else {
					this.$message({
						message: res.data.message,
						type: 'error'
					});
					return;
				}
			});
		},
		cancel() {
			this.dialogTableVisible = false;
		},
		goOrderPage() {
			this.$router.push({ path: '/base/transaction/seller/orderForm' });
		},
	}
};
</script>

<style scoped="scoped" lang="scss">
.page {
	background-color: #f0f2f5;
}
.listName {
	height: 60px;
	line-height: 60px;
	font-size: 18px;
	color: #000;
	padding-left: 15px;
}
// 店铺信息展示
.top_user {
	/*padding: 20px;*/
	.top_user_top {
		overflow: hidden;
		background: linear-gradient(#f9be08 0%, #e85411 100%);
		color: #fff;
		padding: 10px 20px 35px;
		position: relative;
		display: flex;
		align-items: center;
	}
	.top_img_box {
		width: 50px;
		height: 50px;
		border-radius: 50%;
		background-color: #e3776d;
		img {
			width: 100%;
			height: 100%;
		}
	}
	.jifen {
		/*text-align: right;*/
		position: absolute;
		top: 59px;
		padding-right: 18px;
		right: 0px;
		z-index: 100;
		font-size: 10px;
	}
	.top_name_box {
		margin-left: 10px;
		display: flex;
		justify-content: center;
		align-items: flex-start;
		flex-direction: column;
	}
	.top_user_body {
		display: flex;
		justify-content: space-around;
		align-items: center;
		padding: 20px 0;
		border: 1px solid #ccc;
		border-top: 1px solid transparent;
	}
	.body_item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 14px;
		font-width: 700;
	}
}

//商城公告
.hypermarket {
	/*margin: 20px 10px 0;*/
	padding: 10px 0;
	position: relative;
	border-radius: 4px;
	background-color: #fff;
	/*-webkit-box-shadow: 1px 2px 10px #eee;*/
	/*box-shadow: 1px 2px 10px #eee;*/
	.hypermarkTop {
		width: 100%;
		height: 6px;
		position: absolute;
		top: 0;
		left: 0;
		border-radius: 4px 4px 0 0;
		/*background-color: #f39800;*/
	}
	.hyperTitle {
		/*text-align: center;*/
		padding: 20px 0;
		font-size: 20px;
		font-weight: 700;
	}
	.hyperListBox {
		min-height: 370px;
		max-height:450px;
	}
	.hyperListBox .hyperList:nth-child(2n + 1) {
		background-color: #fef8ec;
	}
	.hyperList {
		list-style: none;
		height: 36px;
		/*line-height: 36px;*/
		/*margin: 0 20px;*/
		padding: 0 10px;
		color: #666;
		font-size: 10px;
		border-bottom: 1px dashed #f5f6f7;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}
	.hyperListName {
		width: calc(100% - 150px);
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		padding: 0 4px 0 5px;
		cursor: pointer;
	}
}
.wel {
	&__header {
		padding: 25px 40px;
		border-bottom: 1px solid #e8e8e8;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	&__info {
		display: flex;
		align-items: center;
		&-img {
			border-radius: 72px;
			display: block;
			width: 72px;
			height: 72px;
			img {
				width: 100%;
				height: 100%;
				display: block;
			}
		}
		&-content {
			position: relative;
			margin-left: 24px;
			color: rgba(0, 0, 0, 0.45);
			line-height: 22px;
		}
		&-title {
			font-size: 20px;
			line-height: 28px;
			font-weight: 500;
			color: rgba(0, 0, 0, 0.85);
			margin-bottom: 12px;
		}
		&-subtitle {
			position: relative;
			font-size: 14px;
			color: rgba(0, 0, 0, 0.45);
			line-height: 22px;
		}
	}
	&__extra {
		&-item {
			position: relative;
			padding: 0 32px;
			display: inline-block;
			&:last-child {
				&::after {
					display: none;
				}
			}
			&:after {
				background-color: #e8e8e8;
				position: absolute;
				top: 30px;
				right: 0;
				width: 1px;
				height: 40px;
				content: '';
			}
		}
		&-title {
			color: rgba(0, 0, 0, 0.45);
			font-size: 14px;
			line-height: 22px;
			margin-bottom: 4px;
		}
		&-subtitle {
			color: rgba(0, 0, 0, 0.85);
			font-size: 30px;
			line-height: 38px;
			margin: 0;
			span {
				color: rgba(0, 0, 0, 0.45);
				font-size: 20px;
			}
		}
	}
}
/*	文章详情样式*/
.outDiv {
	margin: 20px;
	margin-top: -32px;
}
.upDiv {
	height: 10%;
}
.spanClass {
	padding: 10px 0;
	font-weight: 600;
}
.spanClassTime {
	padding: 5px 0 30px;
}
.downDiv {
	height: 80%;
	overflow-y: auto;
	min-height: 200px;
}
.footDiv {
	height: 10%;
	text-align: center;
}
.btnSty {
	border: none;
	padding: 8px 25px;
	border-radius: 3px;
	border: 1px solid #007aff;
	color: #007aff;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 14px;
	margin: 30px auto;
}

//账户资金
.accountBox {
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.hypermarket {
	/*width: 30%;*/
	/*margin: 20px 10px 0;*/
	padding: 10px;
	position: relative;
	border-radius: 4px;
	background-color: #fff;
	-webkit-box-shadow: 1px 2px 10px #eee;
	box-shadow: 1px 2px 10px #eee;
	.hypermarkTop {
		width: 100%;
		height: 6px;
		position: absolute;
		top: 0;
		left: 0;
		border-radius: 4px 4px 0 0;
		background-color: #f39800;
	}
	.hyperTitle {
		text-align: center;
		padding: 20px 0;
		/*font-size: 15px;*/
		/*font-weight: 200;*/
	}
	.accountSum {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		/*padding: 0 10px;*/
		line-height: 30px;
		margin-right: 2px;
		font-size: 20px;
		font-weight: 600;
		color: #f39800;
		span {
			margin-right: 5px;
			font-size: 12px;
			font-weight: 500;
		}
	}
	.accountLine {
		width: 60%;
		height: 1px;
		background: rgba(150, 150, 150, 0.1);
		margin: 20px auto;
	}
	.accountBtn {
		display: block;
		width: 120px;
		height: 32px;
		padding: 0 23px;
		line-height: 32px;
		margin: 0 auto;
		text-align: center;
		border-radius: 32px;
		color: #fff;
		background-color: #f39800;
		cursor: pointer;
		-webkit-transition: opacity 0.2s ease-in-out;
		transition: opacity 0.2s ease-in-out;
	}
	.hyperList {
		list-style: none;
		height: 36px;
		line-height: 36px;
		margin: 0 20px;
		color: #666;
		font-size: 10px;
		border-bottom: 1px dashed #f5f6f7;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}
	.hyperListName {
		width: calc(100% - 140px);
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		padding: 0 4px 0 5px;
	}
}
.hypermarket.usableBg {
	/*.hypermarkTop {*/
	/*	background: rgb(27, 201, 142);*/
	/*}*/
	/*.accountSum {*/
	/*	color: rgb(27, 201, 142);*/
	/*}*/
	/*.accountBtn {*/
	/*	background: rgb(27, 201, 142);*/
	/*}*/
}
.hypermarket.adBg {
	.hypermarkTop {
		background: rgb(56, 161, 242);
	}
	.accountSum {
		color: rgb(56, 161, 242);
	}
	.accountBtn {
		background: rgb(56, 161, 242);
	}
}
</style>
